@extends('public.main')
@section('title')
    {{ strip_tags($article->title) }}
@endsection

@section('css')
    <meta name="keywords" content="{{ $article->keywords }}"/>
    <meta name="description" content="{{ $article->description }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('/static/css/detail.css') }}">

@endsection

@section('content')
    <div class="container">
        <div class="col-md-12 col-xs-12">
            <div class="col-md-8 col-xs-8">
                <div class="col-md-12 col-xs-12 content_left">
                    <div class="col-md-12 col-xs-12 item_article">
                        <div class="col-md-12 col-xs-12" style="margin:0;padding:0;margin-top:10px ">
                            <h3>
                                {!! $article->title !!}
                            </h3>
                        </div>
                        <div class="col-md-12 col-xs-12 item_content">
                            {!! $article->content !!}
                        </div>
                        <div id="article_id" style="display:none;">{{ $article->id }}</div>
                        @if(Session::get('user')!=null)
                            <div id="user_id" style="display:none;">{{ Session::get('user')->id }}</div>
                        @endif

                        <div class="col-md-12 col-xs-12 detail_button">
                            @if( $before == null )
                                <a role="button" class="col-md-3 col-lg-3 col-xs-3 btn btn-default disabled"  href="/storyDetail/{{ $before }}.html">上一条</a>
                            @else
                                <a role="button" class="col-md-3 col-lg-3 col-xs-3 btn btn-default" href="/storyDetail/{{ $before }}.html">上一条</a>
                            @endif

                            @if( $next == null )
                                <a role="button" class="col-md-6 col-lg-4 col-xs-4 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default disabled" style="background:black;color:white;" href="/storyDetail/{{ $next }}.html">下一条，你懂得</a>
                            @else
                                <a role="button" class="col-md-6 col-lg-4 col-xs-4 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default" style="background:black;color:white;" href="/storyDetail/{{ $next }}.html">下一条，你懂得</a>
                            @endif

                            <a type="button" class="col-md-3 col-lg-3 col-xs-3 col-xs-offset-1 col-md-offset-1 col-lg-offset-1 btn btn-default">收藏本页面</a>
                        </div>
                        <div class="col-md-12 col-xs-12 item_praise">
                            <div class="praise_first">
                                {{ $article->praise }} 好笑
                            </div>
                            <div class="praise_point">
                                ·
                            </div>
                            <div class="praise_second">
                                <a href="#" style="color:#999999" id="comment_num">107 评论</a>
                            </div>
                        </div>
                        <div class="col-md-12 col-xs-12 item_img">
                            <div style="float:left;">
                                <a href="#"><img src="{{ asset('/static/img/good.png') }}" style="width:20px;height:20px;"/></a>
                                <a href="#"><img src="{{ asset('/static/img/bad.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                                <a href="#"><img src="{{ asset('/static/img/comments.png') }}" style="width:20px;height:20px;margin-left:20px;"/></a>
                            </div>
                            <div style="float:right;">
                                <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a></div>
                                <script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":"4056993719","tqq":"101212621"},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","weixin"],"viewText":"分享到：","viewSize":"24"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
                            </div>
                        </div>
                    </div>
                </div>

                {{--进行评论--}}
                @if(Session::get('user')!=null)
                <div class="col-md-12 col-xs-12">
                    <div class="col-md-12 col-xs-12 doComment">
                        <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;">
                            <textarea class="form-control" rows="2" style="margin-top:20px;" id="text_area" placeholder="写点什么。。"></textarea>
                        </div>
                        <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                            <div style="float:left;margin-top:5px;">还剩余<span id="remaining_word">200</span>个字符</div>
                            <div style="float:right;">
                                <button type="button" class="btn btn-success" onclick="pushComment()">评论</button>
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                @if(Session::get('user')==null)
                    <div class="col-md-12 col-xs-12">
                        <div class="col-md-12 col-xs-12 doComment" style="height:50px;">
                            <div class="col-md-12" style="padding:0px;margin:0px;margin-top:10px;">
                                <div style="float:left;margin-top:5px;">请<a data-toggle="modal" href="#" data-target="#myModal">登录</a>后再进行评论</div>
                            </div>
                        </div>
                    </div>
                @endif
                {{--评论--}}
                <div class="col-md-12 col-xs-12 content_left">
                    <div class="col-md-12 comment">
                        <h4>评论</h4>
                        @foreach( $article_comments as $article_comment )
                            <div>
                                <hr style="width:98%;border:1px solid #e7e5e2;margin:0;"/>
                                <div class="col-md-12 col-xs-12" style="margin-top:10px;margin-bottom:10px;">
                                    <div class="col-md-1 col-xs-1" style="margin:0px;padding:0px;">
                                        <img src="{{ $article_comment->avatar }}" class="img-circle" style="width:40px;height:40px;"/>
                                    </div>
                                    <div class="col-md-11 col-xs-11" style="margin:0px;padding:0px;">
                                        <div class="col-md-12 col-xs-12 comment_name" style="margin:0px;padding:0px;">
                                            {{ $article_comment->name }}
                                        </div>
                                        <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;">
                                            {{ $article_comment->content }}
                                        </div>
                                        @if( $article_comment->reply_name !=null )
                                            <div class="col-md-12 col-xs-12" style="margin:0px;padding:5px;border:1px solid #e7e5e2;background:#f7f7f7;margin-top:5px;">
                                                <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;color:#9b8878;">{{ $article_comment->reply_name }}</div>
                                                <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;">{{ $article_comment->reply_content }}</div>
                                            </div>
                                        @endif

                                        <div class="col-md-12 col-xs-12" style="margin:0px;padding:0px;margin-top:5px;">
                                            <div style="float:left;font-size:10px;color: #6b7d86">
                                                {{ $article_comment->created_at }}
                                            </div>
                                            <div style="float:right;">
                                                <a href="#" style="font-size:10px;color:#6b7d86;" class="reply_btn">回复</a>
                                            </div>
                                        </div>
                                        <div class="col-md-12 col-xs-12 reply" style="margin:0px;padding:0px;display:none;">
                                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;">
                                                <textarea class="form-control" rows="2" style="margin-top:10px;" id="reply_area" placeholder="写点什么。。"></textarea>
                                            </div>
                                            <div class="col-md-12 col-xs-12" style="padding:0px;margin:0px;margin-top:10px;">
                                                <div style="float:right;">
                                                    <div class="reply_name" style="display: none;">{{ $article_comment->name }}</div>
                                                    <div class="reply_content" style="display: none;">{{ $article_comment->content }}</div>
                                                    <button type="button" class="btn btn-success comment_replay">评论</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-xs-4">
                <div class="col-md-12 col-xs-12 content_right">
                    <div class="col-md-12 col-xs-12">
                        <h4>快来扫一扫微信二维码，更多精彩内容等你来发现。</h4>
                        <img src="{{ asset('/static/img/erweima.jpg') }}" style="max-width: 100%">
                    </div>
                    <script type="text/javascript">
                        document.write('<a style="display:none!important" id="tanx-a-mm_56967596_36728993_134034968"></a>');
                        tanx_s = document.createElement("script");
                        tanx_s.type = "text/javascript";
                        tanx_s.charset = "gbk";
                        tanx_s.id = "tanx-s-mm_56967596_36728993_134034968";
                        tanx_s.async = true;
                        tanx_s.src = "http://p.tanx.com/ex?i=mm_56967596_36728993_134034968";
                        tanx_h = document.getElementsByTagName("head")[0];
                        if(tanx_h)tanx_h.insertBefore(tanx_s,tanx_h.firstChild);
                    </script>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>

    </script>
@endsection